/*
 * @Author: liangshuchang
 * @Description:  车主端我的车辆列表组件
 */
import React from 'react';
import {
    View,
    StyleSheet,
    Image,
    Text,
    SafeAreaView,
} from 'react-native';
import { msg } from '../../../../../common';
import { isAndroid, px2dp } from '../../../../../common/styles';
import { fontColorBlack, fontColorSecDeepGray } from '../../../../../common/styles';
import { iconDriverUser } from '../../../../../image';
export default class CarItem extends React.Component {
    constructor(props) {
        super(props);
        this.state = ({});
    }

    render() {
        const { item } = this.props;
        return (
            <View style={[styles.item,]}>
                <View style={[styles.m24, styles.flexCl]}>
                    <View style={styles.flexB}>
                        <Text style={styles.carNo}>{item.carNo}</Text>
                        {
                            item.certificationState === 2 ? (
                                <Text style={styles.adopt}>已通过</Text>
                            ) : (item.certificationState === 1 ? (
                                <Text style={styles.noIdentification}>待认证</Text>
                            ) : (item.certificationState === 3) ? (
                                <Text style={styles.refuse}>已拒绝</Text>
                            ) : null)
                        }

                    </View>
                    <View style={styles.flexB}>
                        <View style={[styles.flexB, styles.mr24]}>
                            <Image style={styles.startIcon} source={require('../../../../../image/icons/icon_truck_gray.png')} />
                            <Text style={[styles.f26, { color: fontColorSecDeepGray }]}>
                                {
                                    (item.vehicleCoopType === 1 ? (
                                        <Text>加盟车</Text>
                                    ) : (item.vehicleCoopType === 2 ? (<Text>托管车</Text>) : null))
                                }
                            </Text>
                        </View>

                        {
                            item.driverName !== null ? (
                                <View style={[styles.flexB, styles.mr24]}>
                                    <Image style={styles.startIcon} source={iconDriverUser} />
                                    <Text style={[styles.f26, { color: fontColorSecDeepGray }]}>{item.driverName}</Text>
                                </View>
                            ) : <Text style={[styles.f26, { color: fontColorSecDeepGray }]}>
                                    无司机
                            </Text>
                        }


                    </View>

                </View>
                <Image
                    style={[{ width: px2dp(240), height: px2dp(184), borderTopRightRadius: px2dp(12), borderBottomRightRadius: px2dp(12) },]}
                    source={this.getImg(item)}
                    resizeMode="stretch"
                />
            </View>
        );
    }
    getImg = (data) => {
        if (data.vehicleCoopType === 1) {
            if (data.certificationState === 1 || data.certificationState === 3) {
                // return require('../../../../../image/nocarType.png')
            } else if (data.certificationState === 2) {
                // return require('../../../../../image/carType.png')
            }
        } else if (data.vehicleCoopType === 2) {
            if (data.certificationState === 1 || data.certificationState === 3) {
                // return require('../../../../../image/carRefuse.png')
            } else if (data.certificationState === 2) {
                // return require('../../../../../image/carType.png')
            }
        }
    }
}

const styles = StyleSheet.create({
    item: {
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    m24: {
        margin: px2dp(24),
    },
    flexCl: {
        flexDirection: 'column',
        justifyContent: 'space-between'
    },
    adopt: {
        backgroundColor: 'rgba(44, 189, 38, 0.1)',
        color: '#2CBD26',
        paddingHorizontal: px2dp(12),
        borderRadius: px2dp(4),
        paddingVertical: px2dp(3)
    },
    noIdentification: {
        backgroundColor: 'rgba(186, 145, 74, 0.1)',
        color: '#BA914A',
        paddingHorizontal: px2dp(12),
        borderRadius: px2dp(4),
        paddingVertical: px2dp(3)
    },
    refuse: {
        backgroundColor: 'rgba(234, 5, 5, 0.1)',
        color: '#EA0505',
        paddingHorizontal: px2dp(12),
        borderRadius: px2dp(4),
        paddingVertical: px2dp(3)
    },
    flexB: {
        flexDirection: 'row',
        alignItems: 'center'
    },
    carNo: {
        color: fontColorBlack,
        fontSize: px2dp(36),
        marginRight: px2dp(12)
    },
    startIcon: {
        width: px2dp(32),
        height: px2dp(32),
        marginRight: px2dp(4)
    },
    mr24: {
        marginRight: px2dp(24)
    },
    f26: {
        fontSize: px2dp(26)
    }
});
